<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=9" />
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
  <title>i-Chengdu 热点地图</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style/css/bootstrap.min.css">
  <link rel="stylesheet" href="style/remcss/map.debug.css">
  <link href="https://cdn.bootcss.com/layer/3.0.1/mobile/need/layer.min.css" rel="stylesheet">
  <script src="https://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
  <script src="js/rem.js"></script>
  <style>
    .BMap_stdMpCtrl{
      top: 2rem !important;
    }
    .layui-m-layershade{
      top:1.875rem !important;
    }
  </style>
</head>

<body>
  <div class="box" id="box">
    <div class="scroll-son">
      <div class="nav">
      <div class="container">
        <div class="pic">
          <img src="images/logo.png" alt="">
        </div>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="product.html">产品介绍</a></li>
            <li><a href="map.html">热点地图</a></li>
            <li><a href="business.html">商务合作</a></li>
            <!--<li><a href="join.html">加入我们</a></li>-->
            <li><a href="regard.html">关于我们</a></li>
            <!--<li><a href="https://ichengdu.com/i_chengdu_oss">管理</a></li>-->
        </ul>
      </div>
    </div>
      <div class="main">
      <div class="left" id="allmap"></div>
        <div class="pop"></div>
    </div>
      <!--<div class="footer">
      <p>Copyright@2017 acd.langyadt.com All Right Reserved.成都市信息化建设发展有限公司</p>
    </div>-->
    </div>
  </div>
</body>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1aXDtrOmWHBYI2Y7Yavz6cAnlINMP6j4"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/mobile/layer.min.js"></script>
<script src="https://cdn.bootcss.com/json2/20160511/json2.js"></script>
<script src="./js/tools.js"></script>
<script type="text/javascript">
  $(function() {
    function getDeviceList(success) {
      var param = {
        createTime: "",
        size: 200
      };
      var url = "https://ichengdu.com/i_chengdu_mobile_web/service/wifiServiceI/getWifiList.do";
      var loading = null;
      $.ajax({
        url: url,
        type: "post",
        data: {
          param: JSON.stringify(param)
        },
        dataType: "json",
        beforeSend: function() {
          loading = layerTool.loading();
        },
        success: function(data) {
          console.log(data);
          success(data.beans);

        },
        error: function() {
          layerTool.msg("请求错误");
        },
        complete: function() {
          layer.close(loading);
        }
      });
    }

    getDeviceList(function(data) {
      var markers = [];
      var nameMap = {};
      $.each(data, function(index, d) {
        if (tools.isNotNull(d.latitude) && tools.isNotNull(d.longitude)) {
          markers.push({
            latitude: d.latitude,
            longitude: d.longitude,
            hpName: d.hpName,
            hpCode: d.hpCode,
            positions: d.positions
          });


          nameMap[d.latitude + "-" + d.longitude] = "<div style='font-size:0.4rem;color: #666'>名称:" + d.hpName + "<br/>编号:" + d.hpCode + "<br/>地址:" + d.positions + "</div>";
        }
      });

      baiduMap.addPoint(markers, nameMap);
    });
  });


  var baiduMap = (function() {
    var map = null;
    var _nameMap = {};

    var _opts = {
      width: 230, // 信息窗口宽度
      title: "<p style='font - size: 0.45rem;font - weight: bold;color: #333'>WiFi信息</p>", // 信息窗口标题
      enableMessage: true //设置允许信息窗发送短息
    };

    function openInfo(content, e) {
      var point = new BMap.Point(e.point.lng, e.point.lat);
      console.log(e.point);
      var infoWindow = new BMap.InfoWindow(content, _opts); // 创建信息窗口对象
      map.openInfoWindow(infoWindow, point); //开启信息窗口
    }

    function _init() {
      // 百度地图API功能
      map = new BMap.Map("allmap");
      var point = new BMap.Point(104.06667, 30.66667);
      map.centerAndZoom(point, 15);
      //var marker = new BMap.Marker(point);  // 创建标注
      //map.addOverlay(marker);               // 将标注添加到地图中


      //地图配置
      var top_left_control = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_TOP_LEFT
      }); // 左上角，添加比例尺
      var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
      var top_right_navigation = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_SMALL
      }); //右上角，仅包含平移和缩放按钮
      /*缩放控件type有四种类型:
       BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
      //添加控件和比例尺
//      map.addControl(top_left_control);
//      map.addControl(top_left_navigation);
//      map.addControl(top_right_navigation);
      map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
      map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
      map.setZoom(13);
      // 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
      });
      map.addControl(navigationControl);
      // 添加定位控件
      var geolocationControl = new BMap.GeolocationControl();
      geolocationControl.addEventListener("locationSuccess", function(e) {
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        alert("当前定位地址为：" + address);
      });
      geolocationControl.addEventListener("locationError", function(e) {
        // 定位失败事件
        alert(e.message);
      });
      map.addControl(geolocationControl);


      //定位当前位置
      var loading = layerTool.loading("正在获取您的当前位置,请稍后片刻...");
      var geolocation = new BMap.Geolocation();
      var myIcon1 = new BMap.Icon("images/wifi-icon1.png", new BMap.Size(20, 30), {
        imageSize: new BMap.Size(20, 30)
      });
      geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point, {
            icon: myIcon1
          });
          map.addOverlay(mk);
          map.panTo(r.point);
          mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
          //alert('您的位置：'+r.point.lng+','+r.point.lat);
        } else {
          alert('failed' + this.getStatus());
        }
        layer.close(loading);
      }, {
        enableHighAccuracy: true
      })

    }


    function _addPoint(points) {
      //        var markers = [];
      //        for (var p of points) {
      //            pt = new BMap.Point(p.lng, p.lat);
      //            var mk = new BMap.Marker(pt);
      //            mk.setTitle(p.msg);
      //            mk.addEventListener("click", function (event) {
      //                var target = event.target;
      //                layerTool.alert(target.getTitle());
      //            });
      //            map.addOverlay(mk);
      //            markers.push(mk);
      //        }

      //加载多个普通点


      //加载海量点
      var _points = [];
      var pt = null;
      var x = null;
      var y = null;
      var myIcon = new BMap.Icon("images/wifi-icon2.png", new BMap.Size(20, 30), {
        imageSize: new BMap.Size(20, 30)
      });
      $.each(points, function(index,p) {
        pt = new BMap.Point(p.longitude, p.latitude);
        var marker2 = new BMap.Marker(pt, {
          icon: myIcon
        }); // 创建标注
        marker2.setTitle(p.latitude + "-" + p.longitude);
        marker2.addEventListener('click', function(e) {
          var key = this.getTitle();
          var msg = _nameMap[key];
          openInfo(msg, e);
        });
        map.addOverlay(marker2);
      })

      //            var op = {
      ////                size: BMAP_POINT_SIZE_BIG,
      //                  shape: BMAP_POINT_SHAPE_WATERDROP,
      ////                color: '#d340c3'
      //            };
      //            var pointCollection = new BMap.PointCollection(_points, op);
      //            var myIcon = new BMap.Icon("./wifi-icon.png", new BMap.Size(20,30),{imageSize:new BMap.Size(20,30)});
      //            var marker2 = new BMap.Marker(_points,{icon:myIcon});  // 创建标注
      //            map.addOverlay(marker2);
      //具体地点点击弹窗。

      //            map.addOverlay(pointCollection);  // 添加Overlay

      //加载聚合点
      //var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});

    }

    _init();

    return {
      addPoint: function(points, nameMap) {
        _addPoint(points);
        _nameMap = nameMap;
      }
    }
  })();
</script>

</html>
